<template>
  <!--table-->
  <div>
<!--    <el-row>-->
<!--      <el-col :span="24" style="box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;margin: 5px 0;height: 40px;align-items: center;display: flex;align-content: center">-->
<!--        <div style="font-size: 20px;font-weight: bold;margin: 5px;display: inline-flex;align-items: center">-->

<!--          <el-icon style="margin-right: 10px;"><Grid /></el-icon>-->
<!--          Related ASM pairs of inputs in all samples-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
  <el-row justify="space-between">
    <el-col :span="5">
      <span>
<!--      <el-card id="sample-type" style="max-width: 480px;margin-bottom: 10px;">-->
<!--        <template #header>Sample type</template>-->
<!--        <div>-->
<!--          <el-button key="plain" @click="selectSampleType('Normal')" text>-->
<!--            <div style="display: flex;justify-content: space-between;width: 100%">-->
<!--              <div style="display: flex;align-items: center;">-->
<!--                <el-icon><Link /></el-icon>-->
<!--                Normal-->
<!--              </div>-->
<!--              <div class="list-group-num">-->
<!--                12334-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-button>-->
<!--        </div>-->
<!--        <div>-->
<!--          <el-button key="plain" @click="selectSampleType('Cancer')" text>-->
<!--            <div style="display: flex;justify-content: space-between;width: 100%">-->
<!--              <div style="display: flex;align-items: center;">-->
<!--                <el-icon><Link /></el-icon>-->
<!--                Cancer-->
<!--              </div>-->
<!--              <div class="list-group-num">-->
<!--                22344-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-button>-->
<!--        </div>-->
<!--        <template #footer>-->
<!--        </template>-->
<!--      </el-card>-->
        </span>
      <el-card style="max-width: 480px;margin-bottom: 10px;margin-top: 40px">
        <template #header>Tissue</template>
        <div v-for="item in tissueList">
          <el-button 
            key="plain" 
            @click="selectTissue(item.name)" 
            text
            :class="{ 'active-nav': select.tissue === item.name }">
            <div style="display: flex;justify-content: space-between;width: 100%">
              <div style="display: flex;align-items: center;">
                <el-icon><Link /></el-icon>
                <span style="max-width: 150px;text-overflow: ellipsis;overflow: hidden;">{{ item.name }}</span>
              </div>
              <div class="list-group-num">
                {{ item.num }}
              </div>
            </div>
          </el-button>
        </div>
        <template #footer>
        </template>
      </el-card>
      <el-card style="max-width: 480px;" v-loading="chrListLoading">
        <template #header>Cis-regulatory elements</template>
        <div v-for="item in chrList">
          <el-button 
            key="plain" 
            @click="selectChr(item.name)" 
            text
            :class="{ 'active-nav': select.chr === item.name }">
            <div style="display: flex;justify-content: space-between;width: 100%">
              <div style="display: flex;align-items: center;">
                <el-icon><Link /></el-icon>
                {{ item.name }}
              </div>
              <div class="list-group-num">
                {{ item.num }}
              </div>
            </div>
          </el-button>
        </div>
        <template #footer>
        </template>
      </el-card>
    </el-col>
    <el-col :span="19">
      <Table
          style="padding-left: 10px"
          :tableAllData="table.tableData" :column="table.column" :searchKey="select" api-key="browse"></Table>
    </el-col>


  </el-row>
<!--  <br/>-->
  <div>
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <div>-->
<!--          <el-row>-->
<!--            <el-col :span="2">-->
<!--              <el-icon :size="50"><Histogram /></el-icon>-->
<!--            </el-col>-->
<!--            <el-col :span="21" style="box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;margin: 5px 0;height: 40px;align-items: center;display: flex;align-content: center">-->
<!--              <div style="font-size: 20px;font-weight: bold;margin: 5px">Statistics of  CpGs of a SNV in associated ASMs</div>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--        <div style="display: flex;justify-content: center">-->
<!--          <Bar :id="'CpGs-of-a-SNV'" :width="600" :height="600"></Bar>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div>-->
<!--          <el-row>-->
<!--            <el-col :span="2">-->
<!--              <el-icon :size="50"><Histogram /></el-icon>-->
<!--            </el-col>-->
<!--            <el-col :span="21" style="box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;margin: 5px 0;height: 40px;align-items: center;display: flex;align-content: center">-->
<!--              <div style="font-size: 20px;font-weight: bold;margin: 5px">Statistics of SNVs for a CpG in associated ASMs</div>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--        <div style="display: flex;justify-content: center">-->
<!--          <Bar :id="'SNVs-for-a-CpG'" :width="600" :height="600"></Bar>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import Table from "@/components/table/table.vue"
import {reactive,toRefs} from "@vue/reactivity";
import {Bar} from '@/components/chart/index'
import api from '@/api/api'
import {watch,ref, onMounted, nextTick} from "vue";

export default {
  name: "browse_page",
  components: {Table,Bar},
  setup(){
    const data = reactive({
      select: ref({
        tissue: ref('Skin'),
        sampleType: ref('NA'),
        chr: ref('NA'),//chr对应Cis-regulatory elements
      }),
      tissueList: ref([
        {name:'Bladder',num:'3612'},
        {name:'Blood',num:'1054001'},
        {name:'Bone marrow',num:'149270'},
        {name:'Brain',num:'1543643'},
        {name:'Breast',num:'668897'},
        {name:'Breast  cancer pdx model',num:'2107'},
        {name:'Cartilage',num:'51526'},
        {name:'Cervix',num:'182754'},
        {name:'Esophagus',num:'93416'},
        {name:'Gastric',num:'17037'},
        {name:'Intestine',num:'475884'},
        {name:'Kidney',num:'936023'},
        {name:'Liver',num:'220346'},
        {name:'Lung',num:'649222'},
        {name:'Lymph  node',num:'165143'},
        {name:'Nasopharynx',num:'30279'},
        {name:'Nipple  aspirate fluid',num:'10'},
        {name:'Oral  ',num:'163030'},
        {name:'Ovary',num:'1083094'},
        {name:'Pancreas',num:'75069'},
        {name:'PDX model colorectal cancer ',num:'1871'},
        {name:'PDX of prostate cancer',num:'3827'},
        {name:'Peritoneum',num:'665'},
        {name:'Plasma',num:'3490'},
        {name:'Prostate',num:'11002'},
        {name:'Retina',num:'61974'},
        {name:'Retinal organoids',num:'54777'},
        {name:'Skin',num:'10359'},
        {name:'Thyroid gland',num:'271415'},
        {name:'Xenograft cells of acute lymphoblastic leukemia',num:'11221'}
      ]),
      // sampleTypeList: ref([]),
      chrList: ref([
        {name:'3D interaction',num:'7962047',value:"d3d"},
        {name:'Accessible chromatin',num:'3453952',value:"atac"},
        {name:'Enhancer',num:'6888896',value:"enhancer"},
        {name:'Super enhancer',num:'3968059',value:"se"},
        {name:'Insulator',num:'978106',value:"insulator"}
      ]),
      table: {
        tableData: ref([]),
        column: [
          {name: 'Index SNV',value:'idInDbsnp',href:true},
          {name: 'Chr',value:'chr',href:false},
          {name: 'CpG pos',value:'cpgPos',href:false},
          {name: 'p-value',value:'pValue',href:false},
          {name: 'q-value',value:'qValue',href:false},
          {name: 'Ref',value:'refInDbsnp',href:false},
          {name: 'Observe',value:'alternateAllele',href:false},
          {name: 'Sample',value:'sample',href:false},
          {name: 'Tissue',value:'sampleInfo.tissue',href:false},
          {name: 'Sample type',value:'sampleInfo.sampleType',href:false},
        ]
      },
      chrListLoading:ref(true)
    })
    const getchrList = async () =>{
      data.chrListLoading = true
      const res =await api.Browse.getElementByTissue(data.select.tissue)
      for (let i = 0; i < data.chrList.length; i++) {
        data.chrList[i].num = res.data[0][data.chrList[i].value]
      }
      data.chrListLoading = false
    }

    // 添加 ref 用于获取选中元素
    const activeButtonRef = ref(null)

    // 滚动到选中元素的函数
    const scrollToActive = async () => {
      await nextTick()
      const activeElement = document.querySelector('.active-nav')
      if (activeElement) {
        activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' })
      }
    }

    // 组件挂载后执行滚动
    onMounted(() => {
      scrollToActive()
      getchrList()
    })

    // 在选择变化时也执行滚动
    watch(() => data.select.tissue, () => {
      scrollToActive()
      getchrList()
    })

    watch(() => data.select.chr, () => {
      scrollToActive()
    })

    const selectTissue = (value)=>{
      data.select.tissue = value
    }
    const selectSampleType = (value)=>{
      data.select.sampleType = value
    }
    const selectChr = (value)=>{
      data.select.chr = value
    }

    watch(()=>data.select.chr,(value)=>{
      data.select.chr = value
      data.select = {
        tissue: data.select.tissue,
        sampleType: data.select.sampleType,
        chr: value,
      }
      console.log("chr==>",data.select.chr)
    })
    watch(()=>data.select.tissue,(value)=>{
      data.select.tissue = value
      data.select = {
        tissue: value,
        sampleType: data.select.sampleType,
        chr: data.select.chr,
      }
      console.log("tissue==>",data.select.tissue)
    })
    watch(()=>data.select.sampleType,(value)=>{
      data.select.sampleType = value
      data.select = {
        tissue: data.select.tissue,
        sampleType: value,
        chr: data.select.chr,
      }
      console.log("sampleType==>",data.select.sampleType)
    })
    watch(()=>data.select,(value)=>{
      console.log("select==>",value)
      data.select = value
    })
    return {
      ...toRefs(data),selectTissue,selectSampleType,selectChr, activeButtonRef
    }
  }
}
</script>

<style scoped>
::v-deep .el-card__body{
  padding:0;
  max-height: 150px;
  overflow: scroll;
  overflow-x:hidden
}
::v-deep .el-card__footer{
  padding:10px;
}
::v-deep #sample-type .el-card__body{
  padding:0;
  overflow-y:hidden
}
::v-deep .el-card__body .el-button.is-text{
  padding:20px;
  width: 100%;
  font-size: 18px;
}
::v-deep .el-card__body .el-button.is-text span{
  width: 100%;
}
.list-group-num{
  min-width: 20px;
  min-height: 18px;
  align-items: center;
  display: flex;
  padding: 2px;
  border-radius: 25px;
  background-color: #2185d0;
  color: white;
  font-size: 14px;
}

.active-nav {
  background-color: #ecf5ff !important;
  color: #409eff !important;
}

.active-nav .list-group-num {
  background-color: #409eff;
}
</style>
